<template>
  <div @click="handleResize" class="sizer-wrap">
    <div class="strip"></div>
    <div class="sizer">
      <div class="line"></div>
    </div>
    <div>
      <button aria-label="toggle" class="btn">
        <div class="overlay"></div>
        <span
          class="cursor-pointer fill-current text-white flex-shrink-0 leading-none"
        >
          <j-icon
            :name="expanded ? 'chevron-left' : 'chevron-right'"
            :size="24"
            class="icon text-textMedium "
          ></j-icon>
        </span>
      </button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    expanded: {
      type: Boolean,
      required: true
    }
  },
  setup(props, { emit }) {
    const handleResize = () => {
      emit('onResize', !props.expanded)
    }

    return {
      handleResize
    }
  }
})
</script>

<style lang="scss" scoped>
.sizer-wrap {
  bottom: 0;
  left: 100%;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  width: 24px;
  z-index: 3;
}
.sizer {
  cursor: ew-resize;
  height: 100%;
  left: -4px;
  position: relative;
  width: 24px;
}
.strip {
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.2) 0px,
    rgba(0, 0, 0, 0.2) 1px,
    rgba(0, 0, 0, 0.1) 1px,
    rgba(0, 0, 0, 0) 100%
  );
  bottom: 0;
  left: -3px;
  opacity: 0.5;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition-duration: 0.22s;
  transition-property: left, opacity, width;
  transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
  width: 3px;
}
.line {
  background-color: #4c9aff;
  opacity: 0;
  height: 100%;
  left: 3px;
  position: absolute;
  width: 2px;
  transition: opacity 200ms ease 0s;
}

.sizer-wrap:hover {
  .sizer .line {
    opacity: 1;
  }
  .btn .icon {
    color: #4c9aff;
  }
}

.btn {
  box-shadow: rgba(9, 30, 66, 0.08) 0px 0px 0px 1px,
    rgba(9, 30, 66, 0.08) 0px 2px 4px 1px;
  color: rgb(107, 119, 140);
  cursor: pointer;
  height: 24px;
  opacity: 1;
  position: absolute;
  top: 32px;
  transform: translate(-50%);
  width: 24px;
  background: 0px center white;
  border-width: 0px;
  border-style: initial;
  border-color: initial;
  border-image: initial;
  border-radius: 50%;
  outline: 0px;
  padding: 0px;
  transition: background-color 100ms linear 0s, color 100ms linear 0s,
    opacity 300ms cubic-bezier(0.2, 0, 0, 1) 0s,
    transform 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
  &:hover {
    background: rgb(67, 154, 255);
    .icon {
      color: white !important;
    }
  }
}

.overlay {
  position: absolute;
  left: -8px;
  right: -12px;
  bottom: -8px;
  top: -8px;
}
</style>
